<template>
  <div class="mine">
    <v-layout class="mine-container" row>
      <v-flex>
        <div class="user">
          <v-list-tile>
            <v-list-tile-avatar size="50">
              <img v-lazy="'https://s1.mi-img.com/mfsv2/download/fdsc3/p01OnXyo8fvC/tgEbekx1EPsj4Q.jpg?thumb=150x150'">
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>猿计划</v-list-tile-title>
              <v-list-tile-sub-title>445273368</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </div>
        <div class="user-order">
          <div>我的订单</div>
          <div>全部订单 ></div>
        </div>
        <ul class="shop-manage">
          <li class="dfk">
            <p></p>
            <p>待付款</p>
          </li>
          <li class="dsh">
            <p></p>
            <p>待收货</p>
          </li>
          <li class="thx">
            <p></p>
            <p>退换修</p>
          </li>
        </ul>
        <ul class="items">
          <li class="i-member"><a href="javascript:void(0)">会员中心</a></li>
          <li class="i-wallet"><a href="javascript:void(0)">我的优惠</a></li>
        </ul>
        <ul class="items">
          <li class="i-service"><a href="javascript:void(0)">服务中心</a></li>
          <li class="i-mihome"><a href="javascript:void(0)">小米之家</a></li>
        </ul>
        <ul class="items">
          <li class="i-fcode"><a href="javascript:void(0)">F码通道</a></li>
        </ul>
        <ul class="items">
          <li class="i-setting"><a href="javascript:void(0)">设置</a></li>
        </ul>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style lang="scss" scoped>
  .mine{
    width: 100%;
  }
  .mine-container {
    min-height: 100vh;
    background: #f5f5f5;

    .user, .user-order, .shop-manage {
      text-align: center;
      background: white;
    }

    .user {
      color: white;
      background: url('https://m.mi.com/static/img/bg.63c8e19851.png') center 0 #f37d0f;
      background-size: auto 100%;
      padding: .32rem 0 .32rem 10px;
    }

    .user-order {
      display: flex;
      padding: .3rem .24rem;
      font-size: .28rem;
      border-bottom: 1px solid #ccc;

      div {
        flex: 1;

        &:first-of-type {
          text-align: left;
        }

        &:last-of-type {
          text-align: right;
        }
      }
    }

    .shop-manage {
      display: flex;
      padding: 20px;

      li {
        flex: 1;

        p:first-of-type {
          width: .48rem;
          height: .48rem;
          margin: 0 auto .16rem;
          background-size: 100% auto;
        }

        &.dfk p:first-of-type {
          background-image: url("");
        }

        &.dsh p:first-of-type {
          background-image: url("");
        }

        &.thx p:first-of-type {
          background-image: url("https://m.mi.com/static/img/nav-4.d68723895f.png");
        }
      }
    }

    .items {
      margin-top: 12px;
      background-color: white;

      li {
        position: relative;
        padding-left: 1.12rem;
        text-align: left;
        height: 1.04rem;
        line-height: 1.04rem;
        color: rgba(0, 0, 0, .54);
        background-size: .48rem auto;
        background-position: .32rem center;
        list-style: none;

        &:last-of-type a {
          border-bottom: none;
        }

        a {
          display: block;
          padding-right: .56rem;
          border-bottom: 1px solid rgba(0, 0, 0, .15);

          &:after {
            content: '';
            position: absolute;
            width: .2rem;
            height: .2rem;
            right: .32rem;
            top: 50%;
            border-left: 1px solid currentColor;
            border-top: 1px solid currentColor;
            transform: translate3d(0, -50%, 0) rotate(135deg);
          }
        }

        &.i-member {
          background-image: url("");
        }

        &.i-wallet {
          background-image: url("");
        }

        &.i-service {
          background-image: url("");
        }

        &.i-mihome {
          background-image: url("");
        }

        &.i-fcode {
          background-image: url("");
        }

        &.i-setting {
          background-image: url("https://m.mi.com/static/img/i-setting.fb9625b3f2.png");
        }
      }
    }
  }
</style>
